<template>
  <div>
    <template v-has="'content:publish'">
      <a-tabs @change="tabChange" type="card">
        <a-tab-pane key="1" tab="我的活动"></a-tab-pane>
        <a-tab-pane key="2" tab="全部活动"></a-tab-pane>
      </a-tabs>
    </template>
    <a-spin :spinning="loading">
      <a-empty v-if="!loading&&dataSource.length==0"></a-empty>
      <div class="item" v-for="(item) in dataSource" :key="item.id">
        <div class="item-title">{{item.activityTitle}}</div>
        <div class="item-content">
          <img class="item-icon" :src="item.imgUrl1||defaultImgUrl">
          <div style="flex:1">
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">活动编号</div>
                <div class="item-value">{{item.activityNo}}</div>
              </a-col>
              <a-col class="item-flex" :span="8">
                <div class="item-label">创建时间</div>
                <div class="item-value">{{item.createTime}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">活动限制人数</div>
                <div class="item-value">{{item.applyLimitNum || '不限人数'}}</div>
              </a-col>
              <a-col class="item-flex" :span="8">
                <div class="item-label">截止时间</div>
                <div class="item-value">{{item.endTime||'无截止时间'}}</div>
              </a-col>
            </a-row>
            <div>
              <span @click="lookActivity(item)" class="item-button">查看 <a-icon type="eye"></a-icon></span>
              <template v-has="'content:publish'">
                <span v-if="item.isRelease==3" @click="showPublishSetting(item)" class="item-button user">发布 <i
                  class="iconfont icon-fabu"></i></span>
                <span v-if="item.isRelease==2" class="item-button user">发布中 <i class="iconfont icon-fabu"></i></span>
              </template>
              <span @click="lookUsers(item)" class="item-button user">用户 <a-icon type="usergroup-add"
                                                                                 style="font-size:14px;"></a-icon></span>
            </div>
          </div>
        </div>
      </div>
      <a-pagination @change="loadData" style="text-align: right" v-model="ipagination.current"
                    :total="ipagination.total" show-less-items/>
    </a-spin>
    <preview-with-activity-info v-if="showPreview" :activity-info="currentItem"
                                :visible.sync="showPreview"></preview-with-activity-info>
    <user-modal ref="userModal"></user-modal>
    <publish-setting ref="publishSetting" @refresh="loadData"></publish-setting>
  </div>
</template>

<script>
  //活动列表
  import {JeecgListMixin} from "@/mixins/JeecgListMixin";
  import PreviewWithActivityInfo from "@/components/xinke/preview/PreviewWithActivityInfo";
  import UserModal from "./modules/UserModel";
  import PublishSetting from "@/components/xinke/PublishSetting";

  export default {
    name: "ActivityList",
    components: {PublishSetting, UserModal, PreviewWithActivityInfo},
    mixins: [JeecgListMixin],
    data() {
      return {
        url: {
          list: 'activity/activityInfo/myActivityList'
        },
        defaultImgUrl: require('@/assets/nodata.png'),
        showPreview: false,
        currentItem: null
      }
    },
    methods: {
      getQueryField() {
        return ''
      },
      tabChange(key) {
        if (key == 1) {
          this.url.list = 'activity/activityInfo/myActivityList'
        } else {
          this.url.list = 'activity/activityInfo/list'
        }
        this.loadData(1);
      },
      lookActivity(item) {
        this.currentItem = item;
        this.showPreview = true;
      },
      lookUsers(item) {
        this.$refs.userModal.show(item.activityNo);
      },
      showPublishSetting(item) {
        this.$refs.publishSetting.show(item.taskId, 'activity');
      },
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/fonts/iconfont.css';

  .item {
    background-color: white;
    border-radius: 8px;
    padding: 20px 30px;
    margin: 10px 0;

    &-title {
      font-weight: 700;
      color: #333;
      font-size: 16px;
    }

    &-content {
      display: flex;
      font-size: 13px;
      align-items: center;

      &-title {
        font-size: 15px;
        line-height: 25px;
      }
    }

    &-content .ant-row {
      margin: 8px 0;
    }

    &-icon {
      width: 180px;
      height: 120px;
      border-radius: 5px;
      border: 1px solid #ededed;
      margin-right: 30px;
    }

    &-flex {
      display: flex;
    }

    &-label {
      width: 90px;
      color: #999;
    }

    &-value {
      flex: auto;
      color: #333;
    }

    &-button {
      background-color: #eaeffa;
      border-radius: 6px;
      line-height: 30px;
      color: #06f;
      text-align: center;
      margin-top: 3px;
      cursor: pointer;
      padding: 8px 10px;
    }

    .user {
      color: #35ab5f;
      margin-left: 5px;
      background-color: #e3f3e9;
    }
  }

</style>